<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryFormRef" :inline="true" v-show="showSearch">
      <el-form-item label="老人姓名" prop="elderName">
        <el-input v-model="queryParams.elderName" placeholder="请输入老人姓名" clearable style="width: 200px" @keyup.enter="handleQuery"/>
      </el-form-item>
      <el-form-item label="合同编号" prop="contractNo">
        <el-input v-model="queryParams.contractNo" placeholder="请输入合同编号" clearable style="width: 200px" @keyup.enter="handleQuery"/>
      </el-form-item>
      <el-form-item label="审核状态" prop="isCheckContract">
        <el-select v-model="queryParams.isCheckContract" placeholder="请选择审核状态" clearable>
          <el-option label="待审核" value="0"/>
          <el-option label="已审核" value="1"/>
          <el-option label="已退回" value="2"/>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
        <el-button icon="Refresh" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <!-- 工具栏 -->
    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button type="primary" plain icon="Plus" @click="handleProcess" v-hasPermi="['nursing:admissionContract:add']">入住流程</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="success" plain icon="Edit" :disabled="single" @click="() => handleUpdate()" v-hasPermi="['nursing:admissionContract:edit']">修改</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="danger" plain icon="Delete" :disabled="multiple" @click="() => handleDelete()" v-hasPermi="['nursing:admissionContract:remove']">删除</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="warning" plain icon="Download" @click="handleExport" v-hasPermi="['nursing:admissionContract:export']">导出</el-button>
      </el-col>
      <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>

    <!-- 数据表格 -->
    <el-table v-loading="loading" :data="admissionContractList" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" align="center"/>
      <el-table-column label="老人照片" align="center" prop="elderPhoto" width="100">
        <template #default="scope">
          <el-image
            style="width: 50px; height: 50px"
            :src="scope.row.elderPhotoUrl"
            :preview-src-list="[scope.row.elderPhotoUrl]">
            <template #error>
              <div class="image-slot">
                <el-icon><picture-filled /></el-icon>
              </div>
            </template>
          </el-image>
        </template>
      </el-table-column>
      <el-table-column label="老人姓名" align="center" prop="elderName"/>
      <el-table-column label="身份证号" align="center" prop="idCard" :show-overflow-tooltip="true"/>
      <el-table-column label="合同编号" align="center" prop="contractNo"/>
      <el-table-column label="房间号" align="center" prop="roomNumber"/>
      <el-table-column label="床位号" align="center" prop="bedNumber"/>
      <el-table-column label="月费用" align="center" prop="monthlyFee"/>
      <el-table-column label="审核状态" align="center" prop="isCheckContract">
        <template #default="scope">
          <el-tag :type="scope.row.isCheckContract === '0' ? 'warning' : scope.row.isCheckContract === '1' ? 'success' : 'danger'">
            {{ scope.row.isCheckContract === '0' ? '待审核' : scope.row.isCheckContract === '1' ? '已审核' : '已退回' }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" width="240">
        <template #default="scope">
          <div class="button-group">
            <!-- 管理员可以看到审核按钮 - 第一行按钮 -->
            <div v-if="(hasRole('admin') || hasRole('superadmin')) && scope.row.isCheckContract === '0'" class="button-row">
              <el-button
                type="success"
                icon="Check"
                size="small"
                @click="handleReview(scope.row, '1')">
                通过
              </el-button>
              <el-button
                type="danger"
                icon="Close"
                size="small"
                @click="handleReview(scope.row, '2')">
                退回
              </el-button>
            </div>

            <!-- 第二行按钮 -->
            <div class="button-row">
              <!-- 所有用户都可以查看详情 -->
              <el-button
                type="primary"
                icon="View"
                size="small"
                @click="handleView(scope.row)">
                查看
              </el-button>

              <!-- 管理员可以修改 -->
              <el-button
                v-if="hasRole('admin') || hasRole('superadmin')"
                type="warning"
                icon="Edit"
                size="small"
                @click="handleUpdate(scope.row)">
                修改
              </el-button>
            </div>
          </div>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total > 0"
      :total="total"
      v-model:page="queryParams.pageNum"
      v-model:limit="queryParams.pageSize"
      @pagination="getList"
    />

    <!-- 添加或修改入住流程对话框 -->
    <el-dialog :title="dialog.title" v-model="dialog.visible" width="800px" append-to-body>
      <el-form ref="admissionContractFormRef" :model="form" :rules="rules" label-width="120px">
        <el-form-item label="老人照片" prop="elderPhoto">
          <image-upload v-model="form.elderPhoto"/>
        </el-form-item>
        <el-form-item label="老人姓名" prop="elderName">
          <el-input v-model="form.elderName" placeholder="请输入老人姓名" />
        </el-form-item>
        <el-form-item label="身份证号" prop="idCard">
          <el-input v-model="form.idCard" placeholder="请输入身份证号" />
        </el-form-item>
        <el-form-item label="联系人姓名" prop="contactName">
          <el-input v-model="form.contactName" placeholder="请输入联系人姓名" />
        </el-form-item>
        <el-form-item label="合同编号" prop="contractNo">
          <el-input v-model="form.contractNo" placeholder="请输入合同编号" />
        </el-form-item>
        <el-form-item label="开始日期" prop="startDate">
          <el-date-picker clearable
            v-model="form.startDate"
            type="datetime"
            value-format="YYYY-MM-DD HH:mm:ss"
            placeholder="请选择开始日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="结束日期" prop="endDate">
          <el-date-picker clearable
            v-model="form.endDate"
            type="datetime"
            value-format="YYYY-MM-DD HH:mm:ss"
            placeholder="请选择结束日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="房间号" prop="roomId">
          <el-input v-model="form.roomId" placeholder="请输入房间号" />
        </el-form-item>
        <el-form-item label="床位号" prop="bedNumber">
          <el-input v-model="form.bedNumber" placeholder="请输入床位号" />
        </el-form-item>
        <el-form-item label="合同类型" prop="contractType">
          <el-select v-model="form.contractType" placeholder="请选择合同类型">
            <el-option
                v-for="dict in sys_contract_type"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="月费用" prop="monthlyFee">
          <el-input v-model="form.monthlyFee" placeholder="请输入月费用" />
        </el-form-item>
        <el-form-item label="押金" prop="deposit">
          <el-input v-model="form.deposit" placeholder="请输入押金" />
        </el-form-item>
        <el-form-item label="支付方式" prop="paymentMethod">
          <el-input v-model="form.paymentMethod" placeholder="请输入支付方式" />
        </el-form-item>
        <el-form-item label="付款周期" prop="paymentCycle">
          <el-input v-model="form.paymentCycle" placeholder="请输入付款周期" />
        </el-form-item>
        <el-form-item label="签约人" prop="signedBy">
          <el-input v-model="form.signedBy" placeholder="请输入签约人" />
        </el-form-item>
        <el-form-item label="签约人与老人关系" prop="signerRelationship">
          <el-input v-model="form.signerRelationship" placeholder="请输入签约人与老人关系" />
        </el-form-item>
        <el-form-item label="合同状态" prop="contractStatus">
          <el-select v-model="form.contractStatus" placeholder="请选择合同状态">
            <el-option
                v-for="dict in sys_contract_status"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="终止原因" prop="terminationReason">
          <el-input v-model="form.terminationReason" placeholder="请输入终止原因" />
        </el-form-item>
        <el-form-item label="特殊条款" prop="specialTerms">
            <el-input v-model="form.specialTerms" type="textarea" placeholder="请输入内容" />
        </el-form-item>
        <el-form-item label="备注" prop="remarks">
          <el-input v-model="form.remarks" placeholder="请输入备注" />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button :loading="buttonLoading" type="primary" @click="submitForm">确 定</el-button>
          <el-button @click="cancel">取 消</el-button>
        </div>
      </template>
    </el-dialog>

    <!-- 查看详情对话框 -->
    <el-dialog
      title="入住申请详情"
      v-model="viewDialog.visible"
      width="800px"
      append-to-body
      class="admission-details-dialog">
      <div class="admission-details-container">
        <div class="admission-photo-container">
          <div class="photo-wrapper">
            <el-image
              style="width: 150px; height: 150px"
              :src="viewForm.elderPhotoUrl"
              fit="cover"
              :preview-src-list="viewForm.elderPhotoUrl ? [viewForm.elderPhotoUrl] : []">
              <template #error>
                <div class="image-slot">
                  <el-icon><picture-filled /></el-icon>
                </div>
              </template>
            </el-image>
          </div>
          <div class="elder-name">{{ viewForm.elderName || '未填写' }}</div>
          <div class="contract-status">
            <el-tag :type="viewForm.isCheckContract === '0' ? 'warning' : viewForm.isCheckContract === '1' ? 'success' : 'danger'">
              {{ viewForm.isCheckContract === '0' ? '待审核' : viewForm.isCheckContract === '1' ? '已审核' : '已退回' }}
            </el-tag>
          </div>
          <div class="room-info" v-if="viewForm.roomNumber && viewForm.bedNumber">
            {{ viewForm.roomNumber }}-{{ viewForm.bedNumber }}
          </div>
        </div>

        <div class="admission-info-container">
          <!-- 基本信息 -->
          <div class="info-section">
            <div class="section-title">基本信息</div>
            <div class="info-grid">
              <div class="info-item">
                <span class="info-label">身份证号:</span>
                <span class="info-value">{{ viewForm.idCard || '未填写' }}</span>
              </div>
              <div class="info-item">
                <span class="info-label">合同编号:</span>
                <span class="info-value">{{ viewForm.contractNo || '未填写' }}</span>
              </div>
              <div class="info-item">
                <span class="info-label">合同类型:</span>
                <span class="info-value">{{ viewForm.contractType || '未填写' }}</span>
              </div>
              <div class="info-item">
                <span class="info-label">合同状态:</span>
                <span class="info-value">{{ viewForm.contractStatus || '未填写' }}</span>
              </div>
            </div>
          </div>

          <!-- 费用信息 -->
          <div class="info-section">
            <div class="section-title">费用信息</div>
            <div class="info-grid">
              <div class="info-item">
                <span class="info-label">月费用:</span>
                <span class="info-value">{{ viewForm.monthlyFee || '未填写' }}</span>
              </div>
              <div class="info-item">
                <span class="info-label">押金:</span>
                <span class="info-value">{{ viewForm.deposit || '未填写' }}</span>
              </div>
              <div class="info-item">
                <span class="info-label">支付方式:</span>
                <span class="info-value">{{ viewForm.paymentMethod || '未填写' }}</span>
              </div>
              <div class="info-item">
                <span class="info-label">付款周期:</span>
                <span class="info-value">{{ viewForm.paymentCycle || '未填写' }}</span>
              </div>
            </div>
          </div>

          <!-- 合同日期 -->
          <div class="info-section">
            <div class="section-title">合同日期</div>
            <div class="info-grid">
              <div class="info-item">
                <span class="info-label">开始日期:</span>
                <span class="info-value">{{ viewForm.startDate || '未填写' }}</span>
              </div>
              <div class="info-item">
                <span class="info-label">结束日期:</span>
                <span class="info-value">{{ viewForm.endDate || '未填写' }}</span>
              </div>
            </div>
          </div>

          <!-- 签约人信息 -->
          <div class="info-section">
            <div class="section-title">签约人信息</div>
            <div class="info-grid">
              <div class="info-item">
                <span class="info-label">签约人:</span>
                <span class="info-value">{{ viewForm.signedBy || '未填写' }}</span>
              </div>
              <div class="info-item">
                <span class="info-label">与老人关系:</span>
                <span class="info-value">{{ viewForm.signerRelationship || '未填写' }}</span>
              </div>
              <div class="info-item">
                <span class="info-label">联系人姓名:</span>
                <span class="info-value">{{ viewForm.contactName || '未填写' }}</span>
              </div>
            </div>
          </div>

          <!-- 特殊条款 -->
          <div class="info-section" v-if="viewForm.specialTerms">
            <div class="section-title">特殊条款</div>
            <div class="info-full-width">
              <span class="info-value">{{ viewForm.specialTerms }}</span>
            </div>
          </div>

          <!-- 备注信息 -->
          <div class="info-section" v-if="viewForm.remarks">
            <div class="section-title">备注信息</div>
            <div class="info-full-width">
              <span class="info-value">{{ viewForm.remarks }}</span>
            </div>
          </div>

          <!-- 终止信息 -->
          <div class="info-section" v-if="viewForm.terminationReason">
            <div class="section-title">终止信息</div>
            <div class="info-full-width">
              <span class="info-label">终止原因:</span>
              <span class="info-value">{{ viewForm.terminationReason }}</span>
            </div>
          </div>
        </div>
      </div>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="viewDialog.visible = false">关 闭</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup name="AdmissionContract" lang="ts">
import { listAdmissionContract, getAdmissionContract, delAdmissionContract, addAdmissionContract, updateAdmissionContract, reviewAdmissionContract } from '@/api/nursing/admissionContract';
import { AdmissionContractVO, AdmissionContractQuery, AdmissionContractForm } from '@/api/nursing/admissionContract/types';
import { useRouter } from 'vue-router';
import { useUserStore } from '@/store/modules/user';

const router = useRouter();
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const { sys_contract_status, sys_contract_type } = toRefs<any>(proxy?.useDict('sys_contract_status', 'sys_contract_type'));

const admissionContractList = ref<AdmissionContractVO[]>([]);
const buttonLoading = ref(false);
const loading = ref(true);
const showSearch = ref(true);
const ids = ref<Array<string | number>>([]);
const single = ref(true);
const multiple = ref(true);
const total = ref(0);

const queryFormRef = ref<ElFormInstance>();
const admissionContractFormRef = ref<ElFormInstance>();

const dialog = reactive<DialogOption>({
  visible: false,
  title: ''
});

const viewDialog = reactive({
  visible: false
});

const viewForm = ref<AdmissionContractForm>({});

const initFormData: AdmissionContractForm = {
  contractId: undefined,
  elderPhoto: undefined,
  elderName: undefined,
  idCard: undefined,
  contactName: undefined,
  contractNo: undefined,
  startDate: undefined,
  endDate: undefined,
  roomId: undefined,
  bedNumber: undefined,
  contractType: undefined,
  monthlyFee: undefined,
  deposit: undefined,
  paymentMethod: undefined,
  paymentCycle: undefined,
  signedBy: undefined,
  signerRelationship: undefined,
  contractStatus: undefined,
  terminationReason: undefined,
  specialTerms: undefined,
  remarks: undefined,
}
const data = reactive<PageData<AdmissionContractForm, AdmissionContractQuery>>({
  form: {...initFormData},
  queryParams: {
    pageNum: 1,
    pageSize: 10,
    elderName: undefined,
    contractNo: undefined,
    isCheckContract: undefined,
    params: {
    }
  },
  rules: {
    contractId: [
      { required: true, message: "合同ID不能为空", trigger: "blur" }
    ],
    elderName: [
      { required: true, message: "老人姓名不能为空", trigger: "blur" }
    ],
  }
});

const { queryParams, form, rules } = toRefs(data);

const userStore = useUserStore();

/** 查询入住流程列表 */
const getList = async () => {
  loading.value = true;
  const res = await listAdmissionContract(queryParams.value);
  admissionContractList.value = res.rows;
  total.value = res.total;
  loading.value = false;
}

/** 取消按钮 */
const cancel = () => {
  reset();
  dialog.visible = false;
}

/** 表单重置 */
const reset = () => {
  form.value = {...initFormData};
  admissionContractFormRef.value?.resetFields();
}

/** 搜索按钮操作 */
const handleQuery = () => {
  queryParams.value.pageNum = 1;
  getList();
}

/** 重置按钮操作 */
const resetQuery = () => {
  queryFormRef.value?.resetFields();
  handleQuery();
}

/** 多选框选中数据 */
const handleSelectionChange = (selection: AdmissionContractVO[]) => {
  ids.value = selection.map(item => item.contractId);
  single.value = selection.length != 1;
  multiple.value = !selection.length;
}

/** 修改按钮操作 */
const handleUpdate = async (row?: AdmissionContractVO) => {
  reset();
  const _contractId = row?.contractId || ids.value[0]
  const res = await getAdmissionContract(_contractId);
  Object.assign(form.value, res.data);
  dialog.visible = true;
  dialog.title = "修改入住流程";
}

/** 提交按钮 */
const submitForm = () => {
  admissionContractFormRef.value?.validate(async (valid: boolean) => {
    if (valid) {
      buttonLoading.value = true;
      if (form.value.contractId) {
        await updateAdmissionContract(form.value).finally(() =>  buttonLoading.value = false);
      } else {
        await addAdmissionContract(form.value).finally(() =>  buttonLoading.value = false);
      }
      proxy?.$modal.msgSuccess("操作成功");
      dialog.visible = false;
      await getList();
    }
  });
}

/** 删除按钮操作 */
const handleDelete = async (row?: AdmissionContractVO) => {
  const _contractIds = row?.contractId || ids.value;
  await proxy?.$modal.confirm('是否确认删除入住流程编号为"' + _contractIds + '"的数据项？').finally(() => loading.value = false);
  await delAdmissionContract(_contractIds);
  proxy?.$modal.msgSuccess("删除成功");
  await getList();
}

/** 导出按钮操作 */
const handleExport = () => {
  proxy?.download('nursing/admissionContract/export', {
    ...queryParams.value
  }, `admissionContract_${new Date().getTime()}.xlsx`)
}

/** 入住流程按钮操作 */
const handleProcess = () => {
  router.push('/nursing/admissionProcess');
}

/** 审核按钮操作 */
const handleReview = async (row: AdmissionContractVO, reviewStatus: string) => {
  const statusText = reviewStatus === '1' ? '通过' : '退回';
  await proxy?.$modal.confirm(`确认要${statusText}该入住申请吗？`).finally(() => loading.value = false);
  await reviewAdmissionContract(row.contractId, reviewStatus);
  proxy?.$modal.msgSuccess(`审核${statusText}成功`);
  await getList();
}

/** 查看详情 */
const handleView = (row: AdmissionContractVO) => {
  // 确保elderPhotoUrl字段被正确传递
  viewForm.value = {
    ...row,
    // 如果elderPhoto存在但elderPhotoUrl不存在，使用elderPhoto作为URL
    elderPhotoUrl: row.elderPhotoUrl || row.elderPhoto
  };
  viewDialog.visible = true;
}

/** 判断是否有指定角色 */
const hasRole = (role: string) => {
  // 检查用户是否有指定角色
  return userStore.roles.some(r => {
    // 支持多种角色匹配方式
    if (role === 'admin') {
      return r === 'admin' || r === 'admin_ms' || r === 'superadmin';
    } else if (role === 'superadmin') {
      return r === 'superadmin';
    } else if (role === 'jiashu') {
      return r === 'jiashu';
    }
    return r === role;
  });
}

onMounted(() => {
  getList();
});
</script>

<style lang="scss" scoped>
.image-slot {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  background: #f5f7fa;
  color: #909399;
}

.button-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.button-row {
  display: flex;
  justify-content: center;
  gap: 8px;
}

/* 入住申请详情对话框样式 */
:deep(.admission-details-dialog) {
  .el-dialog__header {
    border-bottom: 1px solid #ebeef5;
    padding: 15px 20px;
    margin-right: 0;
    background-color: #f5f7fa;
  }

  .el-dialog__body {
    padding: 20px;
  }
}

.admission-details-container {
  display: flex;
  gap: 20px;

  .admission-photo-container {
    width: 180px;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 15px;
    background-color: #f8f9fa;
    border-radius: 8px;

    .photo-wrapper {
      margin-bottom: 15px;
      border-radius: 8px;
      overflow: hidden;
      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
      width: 150px;
      height: 150px;

      :deep(.el-image) {
        width: 100%;
        height: 100%;

        .el-image__inner {
          object-fit: cover;
        }
      }
    }

    .elder-name {
      font-size: 18px;
      font-weight: bold;
      margin: 10px 0;
      color: #303133;
      text-align: center;
    }

    .contract-status {
      margin-bottom: 10px;
    }

    .room-info {
      margin-top: 5px;
      color: #606266;
      font-size: 14px;
    }
  }

  .admission-info-container {
    flex: 1;

    .info-section {
      margin-bottom: 20px;
      background-color: #fff;
      border-radius: 8px;
      padding: 15px;
      box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);

      &:last-child {
        margin-bottom: 0;
      }

      .section-title {
        font-size: 16px;
        font-weight: bold;
        color: #409EFF;
        margin-bottom: 15px;
        padding-bottom: 8px;
        border-bottom: 1px solid #ebeef5;
      }

      .info-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
      }

      .info-item {
        display: flex;
        align-items: center;
      }

      .info-full-width {
        margin-bottom: 10px;
      }

      .info-label {
        color: #606266;
        font-weight: 500;
        margin-right: 5px;
        min-width: 90px;
        display: inline-block;
      }

      .info-value {
        color: #303133;
        word-break: break-all;
      }
    }
  }
}
</style>
